<template>
  <div class="staffDetail">
    <a-card title="员工信息">
      <detail-list :col="2">
        <detail-list-item term="姓名">{{ staffInfo.name || '' }}</detail-list-item>
        <detail-list-item term="性别">{{ staffInfo.sex || '' }}</detail-list-item>
        <detail-list-item term="在职状态">{{ staffInfo.staffStatus || '' }}</detail-list-item>
        <detail-list-item term="手机号">{{ staffInfo.phone || '' }}</detail-list-item>
        <detail-list-item term="组织" v-if="staffInfo.orgList?.length > 0">{{ staffInfo.orgList[0].orgName || ''
        }}</detail-list-item>
        <detail-list-item term="职位">{{ staffInfo.position || '' }}</detail-list-item>
      </detail-list>
    </a-card>
    <a-card style="margin-top: 10px;" title="配置信息">
      <a-tabs v-model="tabIndex" @change="tabChange">
        <a-tab-pane key="1" tab="个人信息">
          <a-collapse :bordered="true" v-model="activeUser" v-if="staffList.length > 0">
            <template #expandIcon="props">
              <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
            </template>
            <a-collapse-panel :key="staff.moduleId" :header="staff.name" v-for="staff in staffList">
              <div class="list">
                <a-form layout="inline" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                  <a-form-item :label="item.name" v-for="item in staff.children" :key="item.bid"
                    :style="{ 'width': item.isAlone == 1 ? '100%' : '50%' }">
                    <div v-if="item.fieldType == 6">
                      <div v-show="item.value">
                        <img :src="item.value" style="width:180px;height:120px;" @click="showDo('uploadImg')" />
                        <div class="uploadImg" v-show="false" v-viewer="{ movable: false }">
                          <img :src="item.value" style="width:180px;height:120px;" />
                        </div>
                      </div>
                    </div>
                    <div v-else-if="item.fieldType == 7">
                      <a :href="item.value" target="_blank">{{ strSlice(item.value) }}</a>
                    </div>
                    <div v-else-if="item.fieldType == 8">
                      <a :href="item.value" target="_blank">{{ item.value }}</a>
                    </div>
                    <div v-else>{{ item.value }}</div>
                  </a-form-item>
                </a-form>
              </div>
              <a-button slot="extra" type="primary" size="small" icon="edit" @click.stop="edit(staff)">编辑</a-button>
            </a-collapse-panel>
          </a-collapse>
          <a-empty v-else style="margin: 80px auto;" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="员工社保">
          <div v-if="ensureInfo.insureNo">
            <a-form layout="inline" title="基础信息" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
              <a-card :bordered="false" title="社保公积金记录" style="border-top: 1px solid #eee;">
                <a-form-item label="社保公积金方案名称">
                  {{ ensureInfo.caseName }}
                </a-form-item>
                <a-form-item label="参保城市">
                  {{ ensureInfo.city }}
                </a-form-item>
                <a-form-item label="参保状态">
                  {{ ensureInfo.insureStatus }}
                </a-form-item>
                <a-form-item label="在缴状态">
                  {{ ensureInfo.insurePayStatus }}
                </a-form-item>
                <a-form-item label="首次参保月份">
                  {{ ensureInfo.firstInsureMonth }}
                </a-form-item>
                <a-form-item label="最近参保月份">
                  {{ ensureInfo.recentInsureMonth }}
                </a-form-item>
              </a-card>
            </a-form>
            <a-table :columns="ensureTable.columns" :data-source="ensureTable.loadData" :pagination="false" rowKey="id">
            </a-table>
          </div>
          <a-empty v-else style="margin: 80px auto;" />
        </a-tab-pane>
        <!-- <a-tab-pane key="3" tab="员工工资"></a-tab-pane> -->
        <a-tab-pane key="4" tab="材料附件">
          <a-empty v-if="annexList?.length == 0" style="margin: 80px auto;" />
          <a-row :gutter="20">
            <a-col :span="4" v-for="item in annexList" :key="item.fileId">
              <div class="imgList">
                <img v-if="item.fileType == 'jpg' || item.fileType == 'png'" :src="item.fileUrl" alt="">
                <img v-else-if="item.fileType == 'xlsx' || item.fileType == 'excel'" src="~@/assets/file_icon/excel.png"
                  alt="">
                <img v-else-if="item.fileType == 'docx' || item.fileType == 'doc' || item.fileType == 'word'"
                  src="~@/assets/file_icon/word.png" alt="">
                <img v-else-if="item.fileType == 'zip' || item.fileType == 'rar'" src="~@/assets/file_icon/zip.png"
                  alt="">
                <img v-else-if="item.fileType == 'pdf'" src="~@/assets/file_icon/pdf.png" alt="">
                <img v-else-if="item.fileType == 'txt'" src="~@/assets/file_icon/txt.png" alt="">
                <img v-else src="~@/assets/file_icon/no.png" alt="">
                <div class="handle">
                  <div style="color: #fff;font-size: 16px;">
                    {{ item.fileName | filterMore(10) }}
                  </div>
                  <div>
                    <a-icon type="download" class="icon" :title="item.fileName" @click="downloadFile(item.fileName,item.fileUrl)" style="margin-right: 5px;" />
                    <a-popconfirm title="确认删除?" ok-text="确认" cancel-text="取消" @confirm="delFile(item.fileId)">
                      <a-icon type="delete" class="icon" title="删除" />
                    </a-popconfirm>
                  </div>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <add-info ref="addInfo" @on-ok="addLoad"></add-info>
  </div>
</template>

<script>
import {
  enterpriseStaffInfo
} from "@/api/human/relationInduction"
import AddInfo from "./staff_info_add"
import {
  queryStaffInfoByStaffId,
  queryHrStaffInsureInfo,
  queryEnterpriseStaffFile,
  enterpriseStaffFileDelete
} from "@/api/human/config"
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
export default {
  name: 'staffInfo',
  components: {
    AddInfo,
    DetailList,
    DetailListItem
  },
  data() {
    return {
      staffId: '', // 员工id
      enterpriseId: '', // 企业id
      idCard: '', // 员工身份证
      tabIndex: '1',
      staffInfo: {}, // 员工个人信息

      staffList: [], // 员工信息列表
      ensureInfo: {}, // 员工社保信息
      ensureTable: {
        columns: [],
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      activeUser: [],

      annexList: [],
    }
  },
  created() {

  },
  mounted() {

  },
  activated() {
    this.staffId = this.$route.query.staffId || ''
    this.enterpriseId = this.$route.query.enterpriseId || ''
    this.idCard = this.$route.query.idCard || ''
    this.tabIndex = this.$route.query.type || '1'
    this.init();
  },
  filters: {
    filterMore(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  methods: {
    init() {
      this.getStaffInfo();
      this.tabChange(this.tabIndex);
    },
    // 切换tab
    tabChange(e) {
      this.getConfigInfo();
    },
    async getStaffInfo() {
      let { code, data } = await enterpriseStaffInfo({ enterpriseId: this.enterpriseId, idCard: this.idCard })
      if (code == 1) {
        this.staffInfo = data;
        this.staffId = data.staffId;
      }
    },
    async getConfigInfo() {
      if (this.tabIndex == 1) {
        // 个人信息
        let { code, data } = await queryStaffInfoByStaffId({ enterpriseId: this.enterpriseId, idCard: this.idCard })
        if (code == 1 && data) {
          // data.modules.forEach(el => {
          //   this.activeUser.push(el.moduleId);
          // });
          this.staffList = data.modules;
        }
      } else if (this.tabIndex == 2) {
        // 员工社保
        this.ensureTable.columns = [
          {
            title: '月份',
            dataIndex: 'insureMonth',
          },
          {
            title: '公司社保费',
            dataIndex: 'companySocialTotalPay'
          },
          {
            title: '个人社保费',
            dataIndex: 'personalSocialTotalPay',
          },
          {
            title: '公司公积金费',
            dataIndex: 'companyFundsTotalPay',
          },
          {
            title: '个人公积金费',
            dataIndex: 'personalFundsTotalPay',
          }
        ]
        let { code, data } = await queryHrStaffInsureInfo({ enterpriseId: this.enterpriseId, idCard: this.idCard });
        if (code == 1 && data) {
          this.ensureInfo = data;
          this.ensureTable.loadData = data.recordList;
        }
      } else if (this.tabIndex == 4) {
        // 材料附件
        let { code, data } = await queryEnterpriseStaffFile(this.staffId);
        if (code == 1 && data) {
          data.forEach(item => {
            item.fileType = this.handleFileType(item.fileUrl)
          })
          this.annexList = data;
        }
      }
    },
    // 下载模板
    downloadFile(name,url) {
      const fileName = name;
      const elink = document.createElement('a'); // 创建a标签
      elink.download = fileName;
      elink.style.display = 'none';
      elink.href = url; // 下载链接
      document.body.appendChild(elink);
      elink.click(); // 点击下载
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink); // 释放标签
    },
    // 删除附件
    async delFile(fileId) {
      let { code } = await enterpriseStaffFileDelete({ fileId });
      if (code == 1) {
        this.$message.success("删除成功")
        this.getConfigInfo();
      }
    },
    // 处理文件后缀
    handleFileType(url) {
      let fileIndex = url.lastIndexOf(".");
      let fileType = url.substr(fileIndex + 1);
      return fileType
    },
    // 查看大图
    showDo(el) {
      const viewer = this.$el.querySelector('.' + el).$viewer
      viewer.show()
    },
    // 处理文件链接
    strSlice(str) {
      const spliceLength = str.lastIndexOf("/");
      return str.slice(spliceLength + 1);
    },
    edit(row) {
      this.$refs.addInfo.add(row, this.staffId);
    },
    addLoad() {
      this.getConfigInfo();
    }
  },
}
</script>

<style lang="less">
.staffDetail {
  .ant-form-item {
    width: 50%;
    margin-right: 0;
    margin-bottom: 10px;

    .ant-form-item-label {
      width: 260px;
    }
  }

  .user {
    margin-bottom: 20px;

    span {
      font-size: 24px;
      color: #333;
      margin-right: 20px;
      display: inline-block;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .imgList {
    width: 100%;
    position: relative;
    margin-bottom: 20px;

    img {
      width: 100%;
      height: 250px;
    }

    .handle {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 1;
      background: rgba(0, 0, 0, .5);
      border-radius: 4px;
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;

      .icon {
        font-size: 18px;
        color: #f6f6f6;
        cursor: pointer;
      }
    }
  }
}
</style>